import React, { useRef, useContext, forwardRef, useImperativeHandle, useState } from 'react'
import { TextWidget } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';
import SortArea from './SortArea'
import PanelArea from './PanelArea'
import BuildInArea from './BuildInArea'
import PermType from './PermType'
import { getDefaultParams } from '../../../common/useConfigs';
import EventContext from '../../../common/EventContext';
import type { ICategorySelect, IConfigItem } from '../content';
import type { ISearchData } from '../../../../designer/service';
import './index.less'
type ICategoryProps = IConfigItem & {
  list: ISearchData['SectionList'];
  selected: string[];
  onSelected: ICategorySelect;
  $showRightPanel: any
};
export default forwardRef(function RightPanel(props: ICategoryProps & any, ref) {
  const { config, $showRightPanel, $params, $categoryData, engineProps, searchEngineData, showRightPanel,$fileSearchType, $buildInSearchParams, categoryLevel } = props
  const buildRef = useRef<any>(null)
  const panelRef = useRef<any>(null)
  const permtypeRef = useRef<any>(null)
  const { configEvents } = useContext(EventContext);

  const [showAuthority, $showAuthority] = useState(true)
  const resetFields = (parentTopFolderId) => {
    if (configEvents?.current?.clearFields) {
      configEvents?.current?.clearFields() // 插槽
    }

    buildRef.current?.resetAll?.(parentTopFolderId) // 内置
    panelRef.current?.resetAll?.() // 切面
    permtypeRef.current?.resetAll?.() // 权限
    $buildInSearchParams({})
    $categoryData({})
    $fileSearchType('all')
    categoryLevel.current = -1
    $params(getDefaultParams(config, { pageNumber: engineProps.pageNumber, ...searchEngineData, SearchWhere: '' }))
  }
  useImperativeHandle(ref, () => {
    return {
      clearForm: () => {
        panelRef.current?.resetAll?.()
      },
      resetFields,
      buildInForm: buildRef?.current?.buildInForm,
      permTypeForm: permtypeRef?.current?.permTypeForm,
      getData: (params) => buildRef?.current?.getData(params)
    }
  }, [buildRef, panelRef, permtypeRef, showAuthority])
 
  return (
    <div className='rightPanelContainer' style={{ width: showRightPanel ? config.rightSectionWidth : 0 }}>
      <div className='formTitle'>
        <div><TextWidget>SearchResultEngine.dataFilter</TextWidget></div>
        <div className='titleOperation'>
          <span className='resetFields' onClick={() => resetFields(searchEngineData.parentTopFolderId)}><InbizIcon type='icon-ic-shuaxin' style={{ fontSize: 16 }} /><TextWidget>SearchResultEngine.reset</TextWidget></span>
          {config.showSectionIcon && <span className='closeIcon' onClick={() => $showRightPanel(false)}><InbizIcon type='icon-guanbi-yeqian' style={{ fontSize: 16, marginLeft: 15 }} /></span>}
        </div>
      </div>
      <div className='rightPanel'>
        <BuildInArea {...props} permtypeRef={permtypeRef} $showAuthority={$showAuthority} ref={buildRef} configEvents={configEvents} panelRef={panelRef} />
        <PanelArea {...props} ref={panelRef} />
        {config.showContents?.includes('authorityFilter') && showAuthority && <PermType  {...props} ref={permtypeRef} />}
      </div>
    </div>

  )
})
